<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta name="color-scheme" content="light dark">
    <title>Vimium Search Completion</title>
    <!-- We re-use some styling from the options page, so that the look and feel here is similar -->
    <link rel="stylesheet" type="text/css" href="options.css">
    <link rel="stylesheet" type="text/css" href="completion_engines_page.css">
    <link rel="stylesheet" type="text/css" href="../content_scripts/vimium.css" />
    <script src="completion_engines_page.js" type="module"></script>
  </head>

  <body class="vimium-body">
    <div id="wrapper">
      <header>Vimium Search Completion</header>
      <p>
        Search completion is available for custom search engines whose search URL matches one of
        Vimium's built-in completion engines; that is, the search URL matches one of the regular
        expressions below. Search completion is not available for the default search engine.
      </p>
      <p>
        Custom search engines can be configured on the <a href="options.html" target="_blank"
        >options</a>
        page. <br>
        Further information is available on the <a
          href="https://github.com/philc/vimium/wiki/Search-Completion"
          target="_blank"
        >wiki</a>.
      </p>
      <header>Available Completion Engines</header>
      <p>
        Search completion is available in this version of Vimium for the following custom search
        engines.
      </p>
      <p>
        <dl id="engine-list"></dl>
      </p>
    </div>

    <template id="engine-template">
      <h4 data-engine="the-engine">Engine name</h4>
      <div class="engine">
        <p class="explanation"></p>
        <div class="engine-example">
          <p>Example:</p>
          <pre></pre>
        </div>
        <div class="regexps">
          <p>Regular expressions</p>
          <pre></pre>
        </div>
      </div>
    </template>
  </body>
</html>
